<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册表单</title>
    <script src="https://unpkg.com/@tailw  indcss/browser@4"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.3.8/dist/index.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/element-plus@2.3.8/dist/index.full.min.js"></script>
</head>
<body>
    <div id="app">
        <el-card style="max-width: 500px;margin: 50px auto;">
            <el-form :model="form" :rules="rules" ref="formRef">
                <el-form-item label="用户名" prop="user">
                    <el-input v-model="form.user" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="psw">
                    <el-input v-model="form.psw" placeholder="请输入密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="repsw">
                    <el-input v-model="form.repsw" placeholder="请确认密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱名"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input v-model="form.code" placeholder="请输验证码"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio :value="1">男</el-radio>
                        <el-radio :value="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="兴趣爱好" prop="hobby">
                    <el-checkbox-group v-model="form.hobby">
                        <el-checkbox :value="'山地速降'">山地速降</el-checkbox>
                        <el-checkbox :value="'唱歌'">唱歌</el-checkbox>
                        <el-checkbox :value="'做手部运动'">做手部运动</el-checkbox>
                        <el-checkbox :value="'看妞'">看妞</el-checkbox>
                        <el-checkbox :value="'高跟鞋'">高跟鞋</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="出生日期" prop="birth">
                    <el-date-picker v-model="form.birth" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="城市" prop="city">
                    <el-select v-model="form.city" placeholder="选择城市">
                        <el-option value="重庆">重庆</el-option>
                        <el-option value="上海">上海</el-option>
                        <el-option value="广州">广州</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">注册</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    form: {
                        user: '',
                        psw: '',
                        repsw: '',
                        email: '',
                        code: '',
                        sex: '',
                        hobby: [],
                        birth: '',
                        city: ''
                    },
                    rules: {
                        user: [
                            { required: true, message: '请输入用户名', trigger: 'blur' }
                        ],
                        psw: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
                        ],
                        repsw: [
                            { required: true, message: '请确认密码', trigger: 'blur' },
                            { validator: this.validatePsw, trigger:[ 'change','blur'] }
                        ],
                        email: [
                            { required: true, message: '请输入邮箱', trigger: 'blur' },
                            { type: 'email', message: '请输入正确的邮箱格式', trigger:[ 'change','blur']}
                        ],
						sex: [
						    { required: true, message: '请选择性别', trigger: 'change' }
						],
                        code: [
                            { required: true, message: '请输入验证码', trigger: 'blur' }
                        ],
                        birth: [
                            { required: true, message: '请选择出生日期', trigger: 'change' }
                        ],
                        city: [
                            { required: true, message: '请选择城市', trigger: 'change' }
                        ]
                    },
                    formRef: null
                };
            },
            methods: {
                validatePsw(rule, value, callback) {
                    if (value !== this.form.psw) {
                        callback(new Error('两次输入的密码不一致'));
                    } else {
                        callback();
                    }
                },
                submitForm() {
                    this.$refs.formRef.validate((valid) => {
                        if (valid) {
                            console.log('表单提交:', this.form);
                            this.$message.success('注册成功');
                        } else {
                            this.$message.error('表单填写有误，请检查');
                            return false;
                        }
                    });
                },
                resetForm() {
                    this.$refs.formRef.resetFields();
                    this.$message.info('表单已重置');
                }
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>
